<template>
  <div class="doc-center-main">
    <div class="doc-left-tree">
      <DetailsLeft @send-click-node="handleClickNode" @send-breadList-arr="getBreadList" ref="leftRef" :breadListNode="breadListNode"></DetailsLeft>
    </div>
    <div class="doc-right-content" v-loading="loading">
      <DetailsRight :treeItem="treeItem" :treeNode="treeNode" :breadListArr="breadListArr" @send-refresh="refresh" @send-breadList-node="handleClickBreadList"></DetailsRight>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { store } from '@/store/doc-center'
import { storeToRefs } from 'pinia'

import DetailsLeft from './components/DetailsLeft.vue'
import DetailsRight from './components/DetailsRight.vue'

const docStore = store()
const { loading } = storeToRefs(docStore)

const treeItem = ref<object>()
const treeNode = ref<object>()
const handleClickNode = (item: object, node: object) => {
  treeItem.value = item
  treeNode.value = node
}

/**
 * @desc: 刷新页面
 * @return {*}
 */
const leftRef = ref<InstanceType<typeof DetailsLeft>>()
const refresh = (id:number) => {
  leftRef.value?.getData(id)
}

/**
 * @desc: 点击切换面包屑
 * @return {*}
 */
const breadListNode = ref<number>()
const handleClickBreadList = (id :number) => {
    breadListNode.value = id
}

/**
 * @descr: 获取点击外部文件进来的面包屑
 * @param {*} item
 * @return {*}
 */
const breadListArr = ref<object>()
const getBreadList = (item:object) => {
  breadListArr.value = item
}
</script>

<style lang="less" scoped>
.doc-center-main {
  display: flex;
  width: 100%;
  height: 100%;
  .doc-left-tree {
    overflow: auto;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    padding: 10px;
    width: 230px;
    flex-shrink: 0;
  }
  .doc-right-content {
    background: #fff;
    padding: 10px;
    flex-grow: 1;
    width: 0;
    flex-shrink: 0;
    overflow-x: auto;
  }
}
</style>
